<template>
  <div>
    <my-header-2></my-header-2>
    <div class="movie-info">
      <div class="nav">
        <a href="">猫眼电影</a>
        &nbsp;>&nbsp;
        <span>{{ itemObj.nm }}</span>
      </div>
      <div class="movie-info-top">
        <div class="movie-cover"><img :src="itemObj.img" alt="" /></div>
        <div class="movie-desc">
          <div class="movie-name">{{ itemObj.nm }}</div>
          <div class="movie-en-name">{{ itemObj.enm }}</div>
          <div class="movie-type">
            <span class="movie-cat">{{
              itemObj.cat && itemObj.cat.split(",").join("/")
            }}</span>
            <img
              src="@/assets/img/3dimax.png"
              alt=""
              v-if="itemObj.ver && itemObj.ver[5] == '3'"
            />
            <img
              src="@/assets/img/2DIMAX.png"
              alt=""
              v-if="itemObj.ver && itemObj.ver[5] == '2'"
            />
          </div>
          <div class="actor">
            {{ itemObj.star && itemObj.star.split(",").join("/") }}
          </div>
          <div class="movie-show-time">
            <span>{{ itemObj.pubDesc }}</span>
          </div>
          <div class="btns">
            <div class="btn-l">
              <img src="@/assets/img/want-to-watch.png" alt="" />
              <span>想看</span>
            </div>
            <div class="btn-r">
              <img src="@/assets/img/star.png" alt="" />
              <span>看过</span>
            </div>
          </div>
        </div>
      </div>
      <div class="real-time">
        <div class="top">
          <div class="left">
            <img src="@/assets/img/logo-new.png" alt="" />
            <span>猫眼购票评分</span>
          </div>
          <div class="right">
            <span>{{ itemObj.wish && itemObj.wish.toLocaleString() }}</span>
            <span>人想看</span>
            <span style="margin-left: 11px">{{
              itemObj.watched && itemObj.watched.toLocaleString()
            }}</span>
            <span>人看过></span>
          </div>
        </div>
        <div class="middle">
          <div class="left">
            <span class="score">{{ itemObj.sc }}</span
            ><br />
            <span
              style="font-size: 12px; font-weigh: 400; margin-left: -121px"
              >{{ itemObj.snum && itemObj.snum.toLocaleString() }}</span
            >
            <span>人评</span>
          </div>
        </div>
      </div>
      <div class="introduction">
        <div class="title">
          <span style="float: left; color: #fff">简介</span>
          <div>
            <span>展开</span>
            <span><img src="@/assets/img/arrow-right.png" alt="" /></span>
          </div>
        </div>
        <div class="con">{{ itemObj.dra }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader2 from "@/components/MyHeader2.vue";
export default {
  name: "ItemView",
  components: {
    MyHeader2,
  },
  data() {
    return {
      itemObj: {},
    };
  },
  async created() {
    let itemid = this.$route.params.itemid;
    let res = await this.$axios.get("./json/" + itemid + ".json");
    this.itemObj = res.data.data.movie;
    this.itemObj.img = this.itemObj.img.replace("w.h", "100.138");
  },
};
</script>

<style lang="less" scoped>
* {
  overflow-x: hidden;
}
*::-webkit-scrollbar {
  width: 0 !important;
}
.movie-info {
  width: 10rem;
  height: 750px;
  background-color: #296666;
  padding: 0.56rem 0.4267rem;
  .nav {
    width: 9.1467rem;
    height: 0.56rem;
    margin-bottom: 0.4rem;
    color: #ccc;
    font-size: 14px;
    a {
      color: #ccc;
    }
  }
  .movie-info-top {
    width: 9.1467rem;
    height: 3.8133rem;
    display: flex;
    .movie-cover {
      width: 2.6667rem;
      height: 3.68rem;
    }
    .movie-desc {
      width: 6.16rem;
      height: 3.8133rem;
      margin-left: 0.32rem;
      color: rgba(255, 255, 255, 0.6);
      .movie-name {
        width: 5.6267rem;
        height: 1.0133rem;
        font-size: 20px;
        line-height: 1.0133rem;
        color: #fff;
        font-weight: 700;
      }
      .movie-en-name {
        width: 6.16rem;
        height: 18px;
        font-size: 12px;
      }
      .movie-type,
      .actor,
      .movie-show-time {
        width: 6.16rem;
        height: 0.48rem;
        img {
          width: 1.0667rem;
          height: 0.3733rem;
          vertical-align: middle;
          margin-left: 5px;
        }
      }
      .btns {
        width: 6.16rem;
        height: 0.8rem;
        display: flex;
        justify-content: space-between;
        .btn-l {
          width: 2.9333rem;
          height: 0.8rem;
          background: hsla(0, 0%, 100%, 0.35);
          border-radius: 5px;
          text-align: center;
          line-height: 0.8rem;
          img {
            width: 0.3733rem;
            height: 0.3733rem;
            margin-right: 0.16rem;
          }
          color: #fff;
        }
        .btn-r {
          width: 2.9333rem;
          height: 0.8rem;
          background: hsla(0, 0%, 100%, 0.35);
          border-radius: 5px;
          text-align: center;
          line-height: 0.8rem;
          img {
            width: 0.3733rem;
            height: 0.3733rem;
            margin-right: 0.16rem;
          }
          color: #fff;
        }
      }
    }
  }
  .real-time {
    width: 9.1467rem;
    height: 3.28rem;
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    margin-top: 0.3rem;
    padding: 9px 10px 10px 0px;
    .top {
      width: 8.88rem;
      height: 0.48rem;
      display: flex;
      justify-content: space-between;
      .left {
        width: 2.6667rem;
        height: 0.48rem;
        color: #fff;
        font-size: 12px;
        img {
          width: 0.4267rem;
          height: 0.4267rem;
          vertical-align: middle;
          margin-left: 5px;
          margin-right: 2px;
        }
      }
      .right {
        width: 5.3333rem;
        height: 18px;
        color: hsla(0, 0%, 100%, 0.75);
      }
    }
    .middle {
      width: 8.88rem;
      height: 51px;
      padding-top: 11px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .left {
        width: 1.9333rem;
        height: 0.9333rem;
        margin-right: 4px;
        color: hsla(0, 0%, 100%, 0.45);
        overflow-x: visible;
        .score {
          width: 1.0667rem;
          height: 28px;
          display: inline-block;
          margin-left: -93px;
          margin-bottom: 0.1067rems;
          color: #ffb400;
          font-size: 26px;
          font-weight: 700;
        }
      }
    }
  }
  .introduction {
    width: 9.1467rem;
    height: 3.4933rem;
    padding-top: 0.4267rem;
    .title {
      position: absolute;
      width: 9.1467rem;
      height: 0.6133rem;
      div span:nth-child(1) {
        color: #fff;
        float: right;
      }
      span:last-child {
        position: absolute;
        right: -11px;
        top: -4px;
        width: 0.2133rem;
        height: 0.1333rem;
        margin-top: 0.16rem;
        img {
          width: 77%;
          transform: rotate(90deg);
        }
      }
    }
    .con {
      width: 9.1467rem;
      height: 2.08rem;
      line-height: 25px;
      font-size: 15px;
      margin: 30px 0rem;
      color: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
  }
}
</style>